<template>
    <div style="height: 76px;line-height: 50px;display: flex;border-bottom: 1px solid #ccc">
        <div style="width:200px ;padding-left: 30px;font-weight: bold;"></div>
        <div style="margin: 10px 75px; width: 500px;">
            <el-input v-model="Search" placeholder="搜索" style="width: 80%" clearable/>
            <el-button type="primary" @click="load">搜索</el-button>
        </div>
    </div>
    <div>
        <!--            //遍历展示-->
        <div v-for="item in tableData" class="div_for" @click="openBlog(item)">
            <div>
                <h3 style="height: 25px" >{{ item.title }}</h3>
            </div>
            <div style="height: 150px">
                {{ item.content }}......
            </div>
            <div style="margin-bottom:1px ;height: 20px">
                作者：  {{ item.author}}
            </div>
        </div>
        <!--        分页-->
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :currentPage="currentPage"
                :page-sizes="[5, 10, 20]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
        />

    </div>
    <el-dialog v-model="Vis" title="详情" width="60%">
        <el-card>
            <div v-html="detail.content" style="min-height: 100px"></div>
        </el-card>
    </el-dialog>
</template>

<script>
    import request from "../../utils/request";

    export default {

        name: "SearchYM",
        data(){
            return{
                Search:[],
                detail:{},
                Vis:false,
                // search: '',             //用于模糊搜索的变量
                currentPage:1,         //记录当前页
                pageSize:10,
                total:0,
                tableData:[],
            }
        },
        created() {
            this.Search= this.$route.query.data
            this.load()
        },
        methods:{
            load(){
                request.get("/search",{
                    params:{
                        pageNum:this.currentPage,
                        pageSize:this.pageSize,
                        search:this.Search,
                    }
                }).then(res => {
                    console.log(res)
                    this.tableData = res.data.records
                    this.total = res.data.total
                })
            },
            openBlog(item){
                this.detail = item
                this.Vis = true
            },
            handleSizeChange(pageSize) {//改变当前每页的个数触发
                this.pageSize = pageSize
                this.load()
            },
            handleCurrentChange(pageNum) {//改变当前页码出发
                this.currentPage = pageNum
                this.load()
            }
        },
    }
</script>

<style scoped>

</style>